<template>
    <div>
        <h1>扫雷</h1>
        设置宽度:<input v-model="resetInfo.w"/>
        设置高度:<input v-model="resetInfo.h"/>
        设置炸弹数量:<input v-model="resetInfo.m"/>
        <button @click="handleReset">重置</button>
        <br>
        宽度:{{width}}
        高度:{{height}}
        <!-- 炸弹坐标:{{mines}} -->
        未显示单元格:{{countUnshow}}
        {{msg}}

    <div v-if="hack">
        <div v-for="(item,indexY) in info" :key="indexY" >
            <div v-for="(item,indexX) in item" :key="indexX" style="display: inline-block">
                <tag
                @mark="handleMark({x:indexX,y:indexY})"
                @aroundClick="handleAroundClick({x:indexX,y:indexY})"
                @showThis="handleShow({x:indexX,y:indexY})"
                @gameover="handleGameOver"
                @otherClick="handleOtherClick({x:indexX,y:indexY})"
                :show="item.show"
                :marked="item.marked"
                :ref="'xy'+indexX+','+indexY"
                :position="{x:indexX,y:indexY}" 
                :in='item.index' />
            </div>
        </div>
    </div>
 
    </div>
</template>
<script>
import tag from '@/components/tag'
export default {
    methods:{
        handleAroundClick(obj){
            console.log('点击周围的东西')
            for(let ii=obj.x-1;ii<=obj.x+1;ii++){
                for(let jj=obj.y-1;jj<=obj.y+1;jj++){
                    if(jj>=0 && jj<this.height && ii>=0 && ii<this.width){
                        let tag=this.$refs['xy'+ii+','+jj][0].$el
                        if(this.info[jj][[ii]].marked===false){
                            tag.click()
                            this.info[jj][ii].show=true
                        }
                    }
                }
            }
        },
        handleMark(obj){
            this.info[obj.y][obj.x].marked=!this.info[obj.y][obj.x].marked
        },
        handleReset(){
            this.width=this.resetInfo.w
            this.height=this.resetInfo.h
            this.mineNum=this.resetInfo.m
            this.refresh()
        },
        handleOtherClick(obj){
            // let tag=this.$refs['xy'+obj.x+','+obj.y][0].$el
            for(let ii=obj.x-1;ii<=obj.x+1;ii++){
                for(let jj=obj.y-1;jj<=obj.y+1;jj++){
                    if(jj>=0 && jj<this.height && ii>=0 && ii<this.width){
                        let tag=this.$refs['xy'+ii+','+jj][0].$el
                        // console.log(this.info[jj][ii].show)
                        if(this.info[jj][[ii]].show===false){        
                            tag.click()
                            this.info[jj][ii].show=true
                        }
                    }
                }
            }
        },
        handleWin(){
            alert('you win')
            this.handleReset()
        },
        handleGameOver(){
            alert('game over')
            this.handleReset()
        },
        handleShow(obj){
            if(!this.info[obj.y][obj.x].show){
                this.info[obj.y][obj.x].show=true
                console.log('handleShow')
                this.countUnshow--
                if(this.countUnshow<=this.mineNum){
                    this.handleWin()
                }            
            }

        },
        setBomb(){
            let mines2=[]
            while(mines2.length<this.mineNum){
                let mineX=Math.floor(Math.random()*this.width);
                let mineY=Math.floor(Math.random()*this.height);
                let mine={x:mineX,y:mineY}

                let result=true;
                for(let i=0;i<mines2.length;i++){
                    if(mine.x===mines2[i].x && mine.y===mines2[i].y){
                        result=false
                    }
                }
                if(result){
                    mines2.push(mine)
                }else{
                    // console.log('出现了重复')
                }
            }
            this.mines=mines2
        },
        refresh(){
            this.countUnshow=this.width*this.height

            //设置炸弹
            this.setBomb()

            let b=[]
            for(let i=0;i<this.height;i++){
                let a=[]
                for(let j=0;j<this.width;j++){
                    let k={index:'0',show: false,marked:false}
                    a.push(k)
                }
                b.push(a)
            }
            this.map=b

            let map2=this.map
            for(let i=0;i<this.mines.length;i++){
                let x=this.mines[i].x
                let y=this.mines[i].y
                map2[y][x].index='z'
                for(let ii=x-1;ii<=x+1;ii++){
                    for(let jj=y-1;jj<=y+1;jj++){
                    if(jj>=0 && jj<this.height && ii>=0 && ii<this.width){
                        if(map2[jj][ii].index!='z'){
                            // console.log(jj,ii)
                            let iii=map2[jj][ii].index
                            let iij=Number.parseInt(iii)+1
                            map2[jj][ii].index=JSON.stringify(iij)
                        }
                    }
                }
            } 
        }
        this.hack=false
        //不用这个数据不刷新
        this.$nextTick(()=>{
            this.info=map2
        this.hack=true
        })
        this.msg='刷新成功'
        setTimeout(()=>{
            this.msg=''
        },3000)
        }
    },
    components:{
        tag
    },
    mounted(){
        this.refresh()
    }, 
    data(){
        return{
            msg:'',
            hack:true,
            resetInfo:{
                w:10,
                h:10,
                m:10
            },

            width: 10,
            height: 10,
            countUnshow: 0,
            mineNum:10,
            info:[],
            map:[
            ], 
            mines:[
            ]
        }
    }
}
</script>
<style scoped>

</style>